<template>
	<view class="content">
		<!-- -------------------导航开始--------------------- -->
		<view class="nav">
			<text v-for="(item,index) in nav" @click="bg1(index)" :class="{bg:bg == index}">{{item}}</text>
		</view>
		<!-- ---------------------轮播图开始---------------------- -->
		<view class="banner">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper ul" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
					 :circular='circular'>
						<swiper-item>
							<image class="ss" src="../../static/1.jpg" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image class="ss" src="../../static/2.jpg" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image class="ss" src="../../static/3.jpg" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image class="ss" src="../../static/4.jpg" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- -------------------------HTML开始---------------------- -->
		<view class="main" v-if="navkz == 0">
			<view class="ul1" v-for="(i,k) in list" :key='k'>
				<text class="h2">{{i.name}}</text>
				<view class="li1" v-for="(s,j) in list[k].list_cen" :key='j' @click="list_fun(k,j)">
					<view class="list_out">
						<text>{{s.tatle}}</text>
						<text class="jiantou"> > </text>
						<view class="list_n" v-if="pd == j && ulkz == k">
							<text>{{s.nr}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- --------------------CSS开始-------------------- -->
		<view class="main1" v-if="navkz == 1">
			<view class="ul1">
				<view class="li1" v-for="(i,k) in list1" :key='k' @click="main1_list(k)">
					<view class="list_out">
						<text>{{i.tatle1}}</text>
						<text class="jiantou"> > </text>
						<view class="list_n" v-if="li1_pd == k">
							<text>{{i.nr1}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- --------------------------javascript开始-------------------- -->
		<view class="main" v-if="navkz == 2">
			<view class="ul1" v-for="(i,k) in list2" :key='k'>
				<text class="h2">{{i.name}}</text>
				<view class="li1" v-for="(s,j) in list2[k].list2_cen" :key='j' @click="list_fun(k,j)">
					<view class="list_out">
						<text>{{s.tatle}}</text>
						<text class="jiantou"> > </text>
						<view class="list_n" v-if="pd == j && ulkz == k">
							<text>{{s.nr}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- --------------------------jquery开始----------------------------- -->
		<view class="main1" v-if="navkz == 3">
			<view class="ul1">
				<view class="li1" v-for="(i,k) in list3" :key='k' @click="main1_list(k)">
					<view class="list_out">
						<text>{{i.tatle3}}</text>
						<text class="jiantou"> > </text>
						<view class="list_n" v-if="li1_pd == k">
							<text>{{i.nr3}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- -------------------------框架开始------------------------------- -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav: ['HTML', 'CSS', 'JavaSprice', 'jquery', '框架', '其他'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				bg: 0,
				pd: 0,
				ulkz: 0,
				navkz: 0,
				list: [{
					name: '网页端H5',
					list_cen: [{
							tatle: 'div',
							nr: '布局最常用容器，里面可以嵌套各种标签，为块状元素默认占取一行,可以通过浮动,定位,变为行内快,弹性盒子等多种方式使它变为行内块元素,从而可以一行显示多个'
						},
						{
							tatle: 'p',
							nr: '为段落标签，默认占取一行，一般用于放成段的文字'
						},
						{
							tatle: 'span',
							nr: '为行内元素，没有任何的意义效果，多用于嵌套到别的元素内部，做单独的样式处理标签使用'
						},
						{
							tatle: 'a',
							nr: '为超链接，可以将内部元素转换成链接元素，通过点击链接到不同的页面'
						},
						{
							tatle: 'img',
							nr: '放图片使用，通过图片的地址来展示图片的容器'
						},
						{
							tatle: 'ul li',
							nr: '列表元素，成对使用，外部ul为存放内部li的容器，li有默认样式，可以通过css来取消'
						},
						{
							tatle: '其他',
							nr: '表单元素：input通过type属性控制元素的表现形式，text为文本输入框，textarea为文本域，select为下拉框，password为密码输入框，radio为单选输入框，checkbox为多选框，button为按钮等。视频：video，音频：vadio等'
						},
					],
				}, {
					name: '微信小程序',
					list_cen: [{
							tatle: 'view',
							nr: '相当于div'
						},
						{
							tatle: 'image',
							nr: '相当于img'
						},
						{
							tatle: 'navigator',
							nr: '跳转标签，和a有点类似，但是他是通过路由功能跳转，内部可以放任何元素'
						},
						{
							tatle: '其他',
							nr: 'text：文本容器，类似span。'
						},
					],
				}, {
					name: '其他模板',
					list_cen: [{
						tatle: 'element-ui',
						nr: '一款前端布局框架，里面有多种元素，可以根据需求向自己的项目中添加各种元素布局，具体使用方法请参考element-ui官网，地址为：https://element.eleme.io/#/zh-CN/component/installation'
					}, ],
				}],
				li1_pd: -1,
				list1: [{
						tatle1: 'css动画:animaation',
						nr1: '语法:animaation: my 8s linear 0s infinite 共有5个参数，分别是动画的名字(自己随便起),动画执行的时间,动画执行规则(默认为:ease--低速开始，然后变快，最后慢速结束,linear:速度一直相同,ease-in--动画以低速开始。ease-out	动画以低速结束。ease-in-out	动画以低速开始和结束。cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。),延时多少秒播放,动画周期规则(默认值为1，可以接受数字，也可以设置为infinite,表示一直循环播放),同时还有其他属性:animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;(表示动画结束后该怎么办，分别为正常播放，反向播放，奇正偶反，偶正奇反，默认，从父元素继承),animation-fill-mode: none|forwards|backwards|both|initial|inherit;(表示动画结束后该应用的样式，重点说结束后停止动画forwards)'
					},
					{
						tatle1: '弹性盒子',
						nr1: '语法:display:felx;将盒子设为了弹性模式，盒内元素变为行内快元素，默认将内部元素的宽度设为盒子宽度除以内部元素个数，所以一排显示，可以通过设置flex-wrap:wrap;支持换行，使内部元素垂直水平居中，可以在外部的弹性盒子中设置justify-conten:center(水平居中对其，还有一个比较常用的为space-betwee：为两边对齐)angie-item：center（为垂直居中对齐）'
					},
					{
						tatle1: 'transform变换',
						nr1: '语法：transform: none|transform-functions;用于对元素进行处理，默认为none，比较常用的还有translate3d(x,y,z)	定义 3D 转换。scale(x[,y]?)	定义 2D 缩放转换。rotate(angle)	定义 2D 旋转，在参数中规定角度。skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。'
					},
					{
						tatle1: '盒子以及字体阴影',
						nr1: '盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset;（横向阴影，纵向阴影，阴影距离，阴影大小，阴影颜色，内外阴影【默认外部，内部为inset】）字体阴影：text-shadow: h-shadow v-shadow blur color;（只有四个参数，同上）'
					},
					{
						tatle1: '文本的一些易忘操作',
						nr1: 'text-indent:首行缩进，letter-spacung：字体间距，text-overflow:ellipsis;文本溢出显示省略号,font-weight:文本的粗细程度'
					},
					{
						tatle1: '媒体查询',
						nr1: 'HTML前边先写一个meat标签，缩写meta：vp，css内部@media screen and (max-width:5000px){},代表最大宽度为多少时触发内部的样式'
					},
					{
						tatle1: '常用但容易忘了怎么写的属性',
						nr1: 'transition:过渡，后面跟all 和时间，用来定义效果变换的过渡时间。opacity:透明度，接收参数0~1。vertical-align：基线对齐，多用来设置图片和文字的对齐方式，middle为中间对其'
					},
					{
						tatle1: '渐变色的设置',
						nr1: '语法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...);第一个参数为角度，指定渐变的方向，后面是渐变的节点。radial-gradient()纵向渐变'
					},
					{
						tatle1: '背景图片的设置',
						nr1: 'background-size	指定背景图片的大小；background-repeat	指定如何重复背景图像（默认重复，可以设置为no-repeat）background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。（默认为：scroll，表示随页面滚动，可以设置为fixed，表示不随页面滚动）background-position	指定背景图像的位置'
					},
				],
				list2: [{
					name: '数据类型',
					list2_cen: [{
							tatle: '数字 number',
							nr: '数字类型，即数字，数字类型一般用于计算，+号能将其他类型的数据强制转换为数字，parseInt()将字符串转换为数字并取整，parseFloat()转换为小数类型'
						},
						{
							tatle: '字符串 string',
							nr: '字符串类型，多为引号内的数据。concat()	连接两个或更多字符串，并返回新的字符串。indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。repeat()	复制字符串指定次数，并将它们连接在一起返回。replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。split()	把字符串分割为字符串数组。'
						},
						{
							tatle: '布尔 Boolean',
							nr: '布尔类型的值为 true 和 false ，用于判断时使用'
						},
						{
							tatle: '数组 array',
							nr: '数组为引用类型，以[]包裹，内部数据以逗号分隔。concat()	连接两个或更多的数组，并返回结果。copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。find()	返回符合传入测试（函数）条件的数组元素。forEach()	数组每个元素都执行一次回调函数。'
						},
						{
							tatle: '空 Null',
							nr: '一般为已经定义过，但没有赋值过的变量'
						},
						{
							tatle: '未定义 Undefined',
							nr: '变量未被定义过，不存在的数据'
						},
						{
							tatle: '对象 Object',
							nr: '为大括号内部数据，采取键值对的形式,在js中一切都为对象'
						},
					],
				}, {
					name: '条件、循环、遍历',
					list2_cen: [{
							tatle: '判断语句',
							nr: 'if、if-else、switch，if(){},括号内部为执行条件，当条件成立，为true时，执行大括号内部的语句，语句后面跟else{},表示除去if后的判断条件之外，就会执行的语句，switch(n){case 1:  break;}工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。'
						},
						{
							tatle: 'for循环',
							nr: 'for(var i = 0;i<xxx;i++){},循环语句，先定义一个初始化的迭代值，第二个为判断条件，当满足时就执行逻辑语句，最后一个为迭代语句，用来控制循环结束，如果缺失就会导致陷入死循环，同时for循环嵌套较多，需要逻辑思维清晰'
						},
						{
							tatle: 'for(x in xx)循环',
							nr: 'for in 循环一般用于遍历对象或者数组，遍历对象时，第一个变量为键名，遍历数组时，第一个变量为下标索引值'
						},
						{
							tatle: 'while do while',
							nr: 'while(条件)，当条件为真时，就会执行代码块，内部需要有迭代条件，否则会导致死循环，do whil和while类似，但是他会在执行判断条件之前先执行一次函数'
						},
					],
				}, {
					name: '正则表达式',
					list2_cen: [{
						tatle: '正则表达式',
						nr: '//(修饰符)，正则的主体写在斜杠之间，修饰符可选。search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。修饰符：i	执行对大小写不敏感的匹配。g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m	执行多行匹配。表达式：[abc]	查找方括号之间的任何字符。[0-9]	查找任何从 0 至 9 的数字。(x|y)	查找任何以 | 分隔的选项。元字符：右斜杠d	查找数字。右斜杠s	查找空白字符。右斜杠b	匹配单词边界。右斜杠uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。量词：n+	匹配任何包含至少一个 n 的字符串。n*	匹配任何包含零个或多个 n 的字符串。n?	匹配任何包含零个或一个 n 的字符串。'
					}, ],
				}, {
					name: 'JSON数据',
					list2_cen: [{
						tatle: 'JSON',
						nr: 'JSON 是一种轻量级的数据交换格式。JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。'
					}, ],
				}, {
					name: 'BOM操作',
					list2_cen: [{
							tatle: 'window',
							nr: '有三种方法能够确定浏览器窗口的尺寸。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度(包括滚动条)window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸window.screen 对象包含有关用户屏幕的信息。screen.availWidth - 可用的屏幕宽度,screen.availHeight - 可用的屏幕高度'
						},
						{
							tatle: 'Window Location',
							nr: 'window.location 对象在编写时可不使用 window 这个前缀。location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 （80 或 443）location.protocol 返回所使用的 web 协议（http: 或 https:）'
						},
						{
							tatle: 'Window History',
							nr: 'history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击向前按钮相同，除此之外可以用 history.go() 这个方法来实现向前，后退的功能。括号里1为前进一个页面，-1为后退一个页面，0为刷新页面'
						},
						{
							tatle: 'JavaScript 计时事件',
							nr: 'setInterval() - 间隔指定的毫秒数不停地执行指定的代码。clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。setTimeout() - 在指定的毫秒数后执行指定代码。clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。'
						},
						{
							tatle: 'Cookie',
							nr: '当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。Cookie 以名/值对形式存储'
						},
					],
				}, {
					name: '存储对象',
					list2_cen: [{
						tatle: ' localStorage（本地存储）',
						nr: 'localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。保存数据语法：localStorage.setItem("key", "value");读取数据语法：var lastname = localStorage.getItem("key");删除数据语法：localStorage.removeItem("key");'
					}, {
						tatle: ' sessionStorage （会话存储）',
						nr: 'sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。保存数据语法：sessionStorage.setItem("key", "value");读取数据语法：var lastname = sessionStorage.getItem("key");删除指定键的数据语法：sessionStorage.removeItem("key");删除所有数据：sessionStorage.clear();'
					}, ],
				}, {
					name: 'DOM操作',
					list2_cen: [{
						tatle: ' 查找',
						nr: '可以根据id，类名，标签名等，语法：document.getElementByxx，也可以使用document.querySelectorAll("selector")使用css选择器'
					}, {
						tatle: ' 改变 HTML',
						nr: '修改 HTML 内容的最简单的方法是使用 innerHTML 属性。ocument.getElementById(id).innerHTML=新的 HTML如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=新属性值'
					}, {
						tatle: ' 改变CSS',
						nr: '如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=新样式'
					}, {
						tatle: ' DOM 事件',
						nr: '比较常用的事件，onclick	当用户点击某个对象时调用的事件句柄。oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发。ondblclick	当用户双击某个对象时调用的事件句柄。onmousedown	鼠标按钮被按下。onmouseenter	当鼠标指针移动到元素上时触发。onmouseleave	当鼠标指针移出元素时触发onmousemove	鼠标被移动。onmouseover	鼠标移到某元素之上。	onmouseout	鼠标从某元素移开。onmouseup	鼠标按键被松开。onkeydown	某个键盘按键被按下。onkeypress	某个键盘按键被按下并松开。onkeyup	某个键盘按键被松开。onpageshow	该事件在用户访问页面时触发	onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发onscroll	当文档被滚动时发生的事件。onunload	用户退出页面。 ( <body> 和 <frameset>)onblur	元素失去焦点时触发	onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)onfocus	元素获取焦点时触发	onfocusin	元素即将获取焦点时触发	onfocusout	元素即将失去焦点时触发	oninput	元素获取用户输入时触发	onreset	表单重置时触发	onsearch	用户向搜索域输入文本时触发 ( <input="search">)	onselect	用户选取文本时触发 ( <input> 和 <textarea>)	onsubmit	表单提交时触发'
					}, {
						tatle: ' DOM 元素',
						nr: '比较常用的元素选择，element.appendChild()	为元素添加一个新的子元素。element.childNodes	返回元素的一个子节点的数组。element.children	返回元素的子元素的集合。element.cloneNode()	克隆某个元素。element.firstChild	返回元素的第一个子节点。element.insertBefore()	现有的子元素之前插入一个新的子元素。element.lastChild	返回的最后一个子节点。element.nextSibling	返回该元素紧跟的一个节点。element.nextElementSibling	返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。element.parentNode	返回元素的父节点。element.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。element.removeChild()	删除一个子元素。element.replaceChild()	替换一个子元素'
					}, ],
				}],
				list3: [{
						tatle3: 'jq选择器',
						nr3: 'jq选择器大大简化了dom操作,写法为$(""),括号内部与css选择器保持一致'
					},
					{
						tatle3: 'jq事件',
						nr3: 'jq中常用事件一般为js中去掉on，常用的有blur()	添加/触发失去焦点事件。change()	添加/触发 文本改变 事件。click()	添加/触发 点击 事件。event.relatedTarget	返回当鼠标移动时哪个元素进入或退出。event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知。focus()	添加/触发 获得焦点 事件。on()	向元素添加事件处理程序。scroll()	添加/触发 scroll 事件。ready()	规定当 DOM 完全加载时要执行的函数'
					},
					{
						tatle3: 'jq动效',
						nr3: '通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：可以使用 toggle() 方法来切换 hide() 和 show() 方法。 fadeIn() 用于淡入已隐藏的元素。 fadeOut() 方法用于淡出可见元素。fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 slideDown() 方法用于向下滑动元素。slideUp() 方法用于向上滑动元素。slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。'
					},
					{
						tatle3: 'jq DOM操作',
						nr3: 'text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值 attr() 方法用于获取属性值。append() - 在被选元素的结尾插入内容。prepend() - 在被选元素的开头插入内容。after() - 在被选元素之后插入内容。before() - 在被选元素之前插入内容。remove() - 删除被选元素（及其子元素）。empty() - 从被选元素中删除子元素addClass() - 向被选元素添加一个或多个类。removeClass() - 从被选元素删除一个或多个类。toggleClass() - 对被选元素进行添加/删除类的切换操作。css() - 设置或返回样式属性'
					},
					{
						tatle3: 'jq遍历',
						nr3: 'parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。first() 方法返回被选元素的首个元素。last() 方法返回被选元素的最后一个元素。eq() 方法返回被选元素中带有指定索引号的元素。filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。not() 方法返回不匹配标准的所有元素。'
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			list_fun(k, j) {
				if (this.pd == j && this.ulkz == k) {
					this.pd = -1;
					this.ulkz = -1;
				} else {
					this.pd = j;
					this.ulkz = k;
				}
			},
			bg1(index) {
				this.bg = index;
				this.navkz = index;
			},
			main1_list(k) {
				if (this.li1_pd == k) {
					this.li1_pd = -1;
				} else {
					this.li1_pd = k;
				}
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0rpx;
		padding: 0rpx;
		list-style: none;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fdfdfd;
	}

	.nav {
		width: 100%;
		white-space: nowrap;
		text-align: center;
		overflow-x: scroll;
		background: #8bb4e0;
	}

	.nav>.bg {
		border-bottom: 2rpx solid black;
		background: #007AFF;
	}

	.nav>text {
		display: inline-block;
		padding: 20rpx 30rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background: #8bb4e0;
		border-bottom: 2rpx solid #FFFFFF;
	}

	.banner {
		width: 98%;
		margin: 10rpx auto;
		height: 400rpx;
	}

	.swiper {
		width: 98%;
		margin: 10rpx auto;
		height: 400rpx;
	}

	.ss {
		width: 100%;
		height: 100%;
	}

	.main {
		width: 98%;
		margin: 10rpx auto;
	}

	.main>.ul1 {
		width: 100%;
	}

	.main1 {
		width: 98%;
		margin: 10rpx auto;
	}

	.main1>.ul1 {
		width: 100%;
	}

	.h2 {
		font-size: 50rpx;
		color: #ce0909;
		line-height: 100rpx;
	}

	.li1 {
		width: 100%;
		margin-top: 20rpx;
		border-bottom: 3rpx solid #C8C7CC;
	}

	.list_out {
		font-size: 22px;
		color: #007AFF;
		line-height: 80rpx;
	}

	.list_out>text {
		display: inline-block;
		margin-left: 20rpx;
	}

	.list_out>.jiantou {
		float: right;
		margin-right: 20rpx;
	}

	.list_n {
		font-size: 36rpx;
		color: #8BB4E0;
		line-height: 60rpx;
	}
</style>
